<template>
    <div class="login_container">
        <!--登录盒子-->
        <div class="login_box">
            <!--图片logo区域-->
            <div class="avatar_box">
                <img src="@/assets/images/logo.png">
            </div>
            <!--登录表单区域  :rules="rules"  表单校验对象 -->
            <el-form ref="formRef" class="login_form" :model="form" :rules="formRules">
                <!--用户名  prop 指定验证规则-->
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user" v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <!--密码-->
                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock" type="password" v-model="form.password"
                              placeholder="请输入密码"></el-input>
                </el-form-item>
                <!--验证码-->
                <el-form-item prop="code">
                    <el-input prefix-icon="el-icon-key" v-model="form.code" placeholder="点击图片切换验证码"
                              style="width: 300px; margin-right: 10px"></el-input>
                    <img :src="captchaUrl" @click="getCaptcha" alt="" width="100" height="40" style="float: right;">
                </el-form-item>
                <!--按钮区域-->
                <el-form-item>
                    <el-button type="primary" class="btn" @click="formSubmit">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

import {captcha,login} from "@/api/user";

export default {
    name: "LoginView",
    data(){
        return{
            captchaUrl:'',
            form:{
                username:'',
                password:'',
                code:'',
                uuid:''
            },
            formRules:{
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 6, max: 15, message: '长度在6 到 15 个字符', trigger: 'blur'}
                ],
                code: [
                    {required: true, message: '请输入验证码', trigger: 'blur'}
                ]
            }
        }
    },
    methods:{
        // 切换验证码回调函数
        getCaptcha(){
            // 发送请求  $.ajax({url,type,data})   axios  异步请求库  函数
            captcha().then((response)=>{
                let {image,uuid} = response.data
                this.captchaUrl = "data:image/png;base64,"+image;
                this.form.uuid = uuid;
            })
        },

        // 表单提交
        formSubmit(){
            // 切换。路由到主页面
           this.$refs.formRef.validate(val=>{
               if (val){
                   login(this.form).then(response=>{
                       if (response.code==0){
                           let {token,nickName}  =  response.data
                           // 保存用户token信息
                           sessionStorage.setItem("token",token);
                           sessionStorage.setItem("nickName",nickName);
                           this.$message({
                               type:'success',
                               message:response.message,
                               onClose:()=>{
                                   // 跳转路由
                                   this.$router.push("/home").catch(error=>{});
                               }
                           })
                       }
                   }).catch(err=>{
                       this.$message.error("请求失败")
                   })
               }
           })
        }

    },
    created(){
        this.getCaptcha()
    }
}
</script>

<style scoped>
.login_container {
    background-color: rgb(26, 160, 148);
    height: 100vh;
}

.login_box {
    width: 450px;
    height: 380px;
    background-color: #fff;
    border-radius: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px #fff;
}

.login_box > .avatar_box {
    height: 70px;
    width: 70px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 2px 2px 20px #2b4b6b;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
}

.avatar_box > img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: scale(1.3);
}

.avatar_box:hover {
    transform: translate(-50%, -50%) rotate(360deg);
    transition: transform 0.5s linear;
    cursor: pointer;
}

.btn {
    width: 100%;
}

.login_form {
    position: absolute;
    bottom: 30px;
    border-bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 0 20px;
}


</style>